<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>积分后台管理</title>
		<link rel="icon" href="img/lei_huiyuan_on.png"  size="16x16" />"
	</head>
	<body>
<div id="top">

</div>
		<div class="body content"  id="app">
			<div id="left">

			</div>

			<div class="right">

				<div class="liebie_title style_hei_16">
					<img src="img/xiugai.png">发布商品
				</div>
        <div class="bottom">

            <div class="zijin_zhuru_top style_hei_14">
                <div class="zijin_zhuru_list zijin_zhuru_list_daili">
                    <p>&ensp;&ensp;<span class="style_hong_12">*</span>标题：</p><input type="text" name="title" v-model="title"  placeholder="请输入标题" class="add_xuan"/>
                </div>
				<div class="zijin_zhuru_list zijin_zhuru_list_daili">
				    <p>&ensp;&ensp;<span class="style_hong_12">*</span>积分：</p><input type="text" name="points" v-model="points"  placeholder="请输入积分" class="add_xuan"/>
				</div>
				<div class="zijin_zhuru_list zijin_zhuru_list_daili">
				    <p><span class="style_hong_12">*</span>商品价值：</p><input type="text" name="jiazhi" v-model="jiazhi"  placeholder="请输入价值" class="add_xuan"/>
				</div>
				
				<div class="zijin_zhuru_list zijin_zhuru_list_daili">
				    <p>&ensp;&ensp;<span class="style_hong_12">*</span>规格：</p><input type="text" name="guige" v-model="guige"  placeholder="请输入规格" class="add_xuan"/>
				</div>
				<div class="zijin_zhuru_list zijin_zhuru_list_daili">
				    <p>&ensp;&ensp;<span class="style_hong_12">*</span>品牌：</p><input type="text" name="pinpai" v-model="pinpai" placeholder="请输入品牌" class="add_xuan"/>
				</div>
				<div class="zijin_zhuru_list zijin_zhuru_list_daili">
				    <p>&ensp;&ensp;<span class="style_hong_12">*</span>库存：</p><input type="text" name="kucun" v-model="kucun"  placeholder="请输入库存" class="add_xuan"/>
				</div>
				<div class="zijin_zhuru_list zijin_zhuru_list_daili img_zheng_list">
				    
					 <p>&ensp;&ensp;<span class="style_hong_12">*</span>商品图：</p>
				    <div class="img_zheng">
						<div class="img_zheng_item" v-for="(item,index) in img">
							<img :src="item" alt="" />
							<span class="img_dl" @click="del_img(index)"></span>
						</div>
						
				    </div>
				    <div class="up_logo">
				        <input type="file" name="" multiple id="shenfen_zheng" @change="upload_zheng()"/>
				    </div>
				    
				</div>
				<p class="style_hui_12 fabu_duo">可上传多张</p>
                <div class="zijin_zhuru_list zijin_zhuru_list_daili dis_flex">
                    <p>&ensp;&ensp;详情：</p>
                    <iframe id="face" src="bianjiqi/editor.html" style="border:0px; width:800px; height:300px;"></iframe>
                    <textarea id="information" name="information" :value="information" style="display:none">
                        
                    </textarea>
                </div>
                <div class="queren_tijiao " @click="tijiao()">
                    确认提交
                </div>
            </div>




   


        </div>
			</div>
		</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
<script src="js/selectFilter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/get.js" type="text/javascript" charset="utf-8"></script>
<script src="js/gong.js"></script>
<script src="js/fengzhuang.js"></script>
<script src="js/vue.js"></script>
<script>
	var app = new Vue({
	    el: '#app',
	    data:{
	        list :[],
			page:1,
			limit:10,
			pageCount:0,
			goodsid:'',
			title:'',
			points:'',
			jiazhi:'',
			guige:'',
			pinpai:'',
			kucun:'',
			information:'',
			img:[]
	    },
		mounted(option){
			if ($_GET['goodsid']) {
			    this.goodsid=$_GET['goodsid']
				this.get_xq()
			}
		},
		methods:{
			get_xq(){
			    $.ajaxDirect("/api/getProduct/"+this.goodsid,'get',{
			    	
			    },
			     (obj)=> {
			    		  if(obj.code==200){
			    			  this.title=obj.product.name
							  this.points=obj.product.points
							  this.jiazhi=obj.product.value
							  this.guige=obj.product.specification
							  this.pinpai=obj.product.brand
							  this.kucun=obj.product.stock
							  if(obj.product.image_url){
								  this.img=obj.product.image_url.split(",")
							  }
							  
							  this.information=obj.product.description

			    		  }
			    },
			    (err)=> {
			            //发送失败
			    })
			},
			del_img(index){
				this.img.splice(index,1)
			},
			tijiao() {
			    var information= $("#information").val();
			    if (!this.title) {
			        
					layer.msg('请输入标题')
			        return false;
			    }
			    if (!this.points) {
			        layer.msg('请输入所需积分')
			        return false;
			    }
				if (!this.jiazhi) {
				    layer.msg('请输入商品价值')
				    return false;
				}
				if (!this.guige) {
				    layer.msg('请输入商品规格')
				    return false;
				}
				if (!this.pinpai) {
				    layer.msg('请输入商品品牌')
				    return false;
				}
				if (!this.kucun) {
				    layer.msg('请输入库存')
				    return false;
				}
				
				if (this.img.length==0) {
				    layer.msg('请上传商品图片')
				    return false;
				}
			    // if (information == '') {
			    //     layer.open({content: '请输入商品详情'});
			    //     return false;
			    // }
			    
			    var data = {
					name: this.title,
					 points:this.points,
					 value:this.jiazhi,
					 specification:this.guige,
					 brand:this.pinpai,
					 stock:this.kucun,
					 image_url:this.img.toString(),
					 description:information
					}
			    var api_src='/api/createProduct'
				if(this.goodsid){
					var api_src='/api/updateProduct'
					data.id=this.goodsid
				}
				$.ajaxDirect(api_src,'post',data,
				 (obj)=> {
						  if(obj.code==200){
							  
							 layer.msg(obj.message)
							 setTimeout(()=>{
								 if(this.goodsid){
									 location.href='shang_list.html'
								 }else{
									 history.go(0);
								 }
								 
							 },500)
				
						  }
				},
				(err)=> {
				        //发送失败
				})
				
				
			
			},
			 upload_zheng() {
				 var that=this
				 var fileImgs=$("#shenfen_zheng")[0].files
				 
				   
				 for(var i=0; i<fileImgs.length; i++){
				 	    // shuangchuan(fileImgs[i],i)
						var formData = new FormData();
						formData.append("file", fileImgs[i]);
						$.ajax({
						        url: 'http://120.55.77.106:3000/api/upload',  
						        type: 'POST',  
						        data: formData,  
						        dataType: 'JSON',  
						        cache: false,  
						        processData: false,  
						        contentType: false,
						        success : function(data) {
						            if(data.code==200){
										that.img.push(data.fileUrl)
									}
						        },
						        error:function(){
						            alert("上传失败");
						        }
						    });
				                             
				     }

			}
	
		}
	})	
</script>
	</body>
</html>